<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-01-19 14:36:53
 * @LastEditTime : 2021-01-21 14:21:47
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-cascader\example2.vue
-->
<template>
  <div style="display: flex">
    <CloudCascader
      :options="options"
      :default-value="['zhejiang', 'hangzhou', 'xihu']"
      style="width: 360px"
    >
      <template slot="displayRender" slot-scope="{ labels, selectedOptions }">
        <span v-for="(label, index) in labels" :key="selectedOptions[index].value">
          <span v-if="index === labels.length - 1">
            {{ label }} (<a @click="(e) => handleAreaClick(e, label, selectedOptions[index])">{{
              selectedOptions[index].code
            }}</a
            >)
          </span>
          <span v-else @click="onChange"> {{ label }} / </span>
        </span>
      </template>
    </CloudCascader>
  </div>
</template>

<script>
  export default {
    title: '2.自定义已选项',
    subTitle: '例如给最后一项加上邮编链接。',
    data () {
      return {
        options: [
          {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
              {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                  {
                    value: 'xihu',
                    label: 'West Lake',
                    code: 752100,
                  },
                ],
              },
            ],
          },
          {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
              {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: 'Zhong Hua Men',
                    code: 453400,
                  },
                ],
              },
            ],
          },
        ],
      }
    },
    methods: {
      onChange (value) {
        console.log(value);
        console.log('this.checked', this.checked)
      },
      handleAreaClick (e, label, option) {
        e.stopPropagation();
        console.log('clicked', label, option);
      },
    }
  }
</script>

<style lang="scss">
</style>